﻿@using System.Web.Script.Serialization
@{
    ViewBag.Title = "List";
}

<h2>List</h2>

 <!-- ko foreach: Fans-->
<div>
    <div>
       <span data-bind="text:FanName"></span> 
    </div> 
    <div>
       <img data-bind="attr:{src: FanLogo}" /> 
    </div>
</div>
 <!-- /ko -->


@{
    var model = ViewBag.Model;
    var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(model));
}


@section scripts{
    <script>

        var init = @jsonData;


        function FanListItemModel(fanName, fanLogo) {
            var self = this;
            self.FanName = ko.observable(fanName);
            self.FanLogo= ko.observable(fanLogo);
        }
      
        function FanListModel() {

            var self = this;
           
            var tempFans= $.isEmptyObject(init.Fans) ? [] : $.map(init.Fans, function(a) {
                return new FanListItemModel(a.FanName, a.FanLogo);
            });

            self.Fans = ko.observableArray(tempFans);

        }

        var vm = new FanListModel();
        ko.applyBindings(vm);
        
    </script>
    

}
